// Kzeng 2024-07-24
// 为车牌号输入框添加软键盘
// 以下为车牌号输入框的 HTML 结构 和 CSS 样式， 带校验功能

// 定义合法字符集：
// chineseCharacters：车牌号首字符合法的汉字（34个省、自治区、直辖市、特别行政区）。
// secondPositionCharacters：车牌号第二字符合法的字母（A-Z）。
// fiveDigitCharacters：车牌号后五位合法的字符（A-H, J-N, P-Z, 0-9）。
// 修改 isValidCharacter 函数：

// 根据字符位置（position）判断是否合法，第一个字符必须是 chineseCharacters 中的汉字。
// 第二个字符必须是 secondPositionCharacters 中的字母。
// 后续字符必须是 fiveDigitCharacters 中的字母或数字。
// 字符按键的字符集：

// 将 chineseCharacters 和 validCharacters
// 通过这些修改，软键盘将只接受合法字符，并在输入满 7 个字符时自动关闭。


document.addEventListener('DOMContentLoaded', function() {
    const licensePlateInput = document.getElementById('id_license_plate');
    const validCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const secondPositionCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const fiveDigitCharacters = 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789'; // 除去 I 和 O
    const chineseCharacters = '京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼港澳台'; // 34个省、自治区、直辖市、特别行政区
    const maxPlateLength = 7;  // 中国大陆车牌号通常为7个字符

    if (licensePlateInput) {
        licensePlateInput.addEventListener('focus', function() {
            showKeyboard(this);
        });
    }

    function isValidCharacter(char, position) {
        if (position === 0) {
            return chineseCharacters.includes(char);
        } else if (position === 1) {
            return secondPositionCharacters.includes(char);
        } else if (position > 1 && position < maxPlateLength) {
            return fiveDigitCharacters.includes(char);
        }
        return false;
    }

    function showKeyboard(input) {
        // 创建软键盘的容器
        const keyboardContainer = document.createElement('div');
        keyboardContainer.id = 'keyboard-container';
        keyboardContainer.style.position = 'absolute';
        keyboardContainer.style.zIndex = '1000';
        keyboardContainer.style.backgroundColor = '#fff';
        keyboardContainer.style.border = '1px solid #ccc';
        keyboardContainer.style.padding = '10px';
        keyboardContainer.style.display = 'flex';
        keyboardContainer.style.flexDirection = 'column';
        keyboardContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';

        // 添加清除输入和关闭键盘的按钮
        const controlsContainer = document.createElement('div');
        controlsContainer.style.display = 'flex';
        controlsContainer.style.justifyContent = 'space-between';
        controlsContainer.style.marginBottom = '10px';

        const clearButton = document.createElement('button');
        clearButton.innerText = '清除';
        clearButton.style.padding = '10px 15px';
        clearButton.style.marginRight = '10px';
        clearButton.style.backgroundColor = '#f44336';
        clearButton.style.color = '#fff';
        clearButton.style.border = 'none';
        clearButton.style.borderRadius = '3px';
        clearButton.style.cursor = 'pointer';
        clearButton.style.fontSize = '16px';
        clearButton.style.textAlign = 'center';
        clearButton.addEventListener('click', () => {
            input.value = '';
        });

        const closeButton = document.createElement('button');
        closeButton.innerText = '关闭';
        closeButton.style.padding = '10px 15px';
        closeButton.style.backgroundColor = '#4CAF50';
        closeButton.style.color = '#fff';
        closeButton.style.border = 'none';
        closeButton.style.borderRadius = '3px';
        closeButton.style.cursor = 'pointer';
        closeButton.style.fontSize = '16px';
        closeButton.style.textAlign = 'center';
        closeButton.addEventListener('click', () => {
            document.body.removeChild(keyboardContainer);
        });

        controlsContainer.appendChild(clearButton);
        controlsContainer.appendChild(closeButton);
        keyboardContainer.appendChild(controlsContainer);

        // 定义车牌字符
        const characters = chineseCharacters + validCharacters;
        let rowContainer = document.createElement('div');
        rowContainer.style.display = 'flex';
        rowContainer.style.flexWrap = 'wrap';
        keyboardContainer.appendChild(rowContainer);

        characters.split('').forEach((char, index) => {
            if (index % 14 === 0 && index !== 0) {
                rowContainer = document.createElement('div');
                rowContainer.style.display = 'flex';
                rowContainer.style.flexWrap = 'wrap';
                keyboardContainer.appendChild(rowContainer);
            }

            const button = document.createElement('button');
            button.innerText = char;
            button.style.margin = '5px';
            button.style.padding = '15px 20px';
            button.style.backgroundColor = '#008CBA';
            button.style.color = '#fff';
            button.style.border = 'none';
            button.style.borderRadius = '3px';
   
            button.style.cursor = 'pointer';
            button.style.width = '50px';
            button.style.height = '50px';
            button.style.display = 'flex';
            button.style.alignItems = 'center';
            button.style.justifyContent = 'center';
            button.style.fontSize = '18px'; // 增加字体大小
            button.style.flex = '1 1 auto'; // Make all buttons the same width
            button.addEventListener('click', () => {
                const position = input.value.length;
                if (isValidCharacter(char, position) && position < maxPlateLength) {
                    input.value += char;
                    if (input.value.length === maxPlateLength) {
                        document.body.removeChild(keyboardContainer);
                    }
                }
            });

            
            // 根据字符类型设置不同的背景颜色
            if (/[\u4e00-\u9fa5]/.test(char)) {
                // 汉字
                button.style.backgroundColor = '#DC143C'; // 红色
            } else if (/[A-Za-z]/.test(char)) {
                // 字母
                button.style.backgroundColor = '#4682B4'; // 蓝色
            } else if (/[0-9]/.test(char)) {
                // 数字
                button.style.backgroundColor = '#2E8B57'; // 绿色
            } else {
                // 其他字符
                button.style.backgroundColor = '#008CBA'; // 默认颜色
            }

            rowContainer.appendChild(button);
        });

        document.body.appendChild(keyboardContainer);

        const rect = input.getBoundingClientRect();
        keyboardContainer.style.top = `${rect.bottom + window.scrollY}px`;
        keyboardContainer.style.left = `${rect.left + window.scrollX}px`;

        // 添加点击页面其他部分关闭键盘的事件
        document.addEventListener('click', function handleClickOutside(event) {
            if (!keyboardContainer.contains(event.target) && event.target !== input) {
                document.body.removeChild(keyboardContainer);
                document.removeEventListener('click', handleClickOutside);
            }
        });
    }
});
